<template>
  <el-container class="app-container">
    <!-- 1. 侧边栏/抽屉容器 -->
    <el-aside v-if="!isMobile" width="220px" class="sidebar">
      <el-menu
          :default-active="$route.path"
          class="el-menu-vertical"
          background-color="#2c3e50"
          text-color="#fff"
          active-text-color="#42b983"
          router
          :collapse="isCollapse"
      >
        <el-main>
          <div style="display: flex;width: 100%;justify-content: center">
            <el-icon :size="25" color="white">
              <Watermelon/>
            </el-icon>
            <el-text style="color:white;margin-left: 5px" class="mx-1" size="large">在线考试系统</el-text>
          </div>
        </el-main>

        <!-- ========== 动态菜单渲染 ========== -->
        <template v-for="item in allowedMenus" :key="item.path">
          <el-menu-item :index="item.path">
            <el-icon>
              <!-- 动态渲染图标 -->
              <component :is="item.icon"/>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
        <!-- ========== 动态菜单渲染结束 ========== -->

      </el-menu>
    </el-aside>

    <!-- 在小屏幕下 (sm及以下)，显示为抽屉 -->
    <el-drawer
        v-else
        v-model="drawerVisible"
        direction="ltr"
        :with-header="false"
        size="220px"
        class="sidebar-drawer"
        :style="{ '--el-drawer-padding-primary': '0px' }"
    >
      <el-menu
          :default-active="$route.path"
          class="el-menu-vertical"
          background-color="#2c3e50"
          text-color="#fff"
          active-text-color="#42b983"
          router
          style="height: 100%"
          :collapse="false"
      >
        <el-main>
          <div style="display: flex;width: 100%;justify-content: center">
            <el-icon :size="20">
              <Watermelon/>
            </el-icon>
            <el-text style="color:white;" class="mx-1" size="large">在线考试系统</el-text>
          </div>
        </el-main>
        <!-- 抽屉里的菜单同样使用动态渲染 -->
        <template v-for="item in allowedMenus" :key="item.path">
          <el-menu-item :index="item.path" @click="drawerVisible = false">
            <el-icon>
              <component :is="item.icon"/>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-drawer>

    <!-- 2. 主内容区域 -->
    <el-main class="main-content">
      <el-container>
        <!-- 2.1 顶部 Header，包含汉堡菜单按钮 -->
        <el-header class="main-header">
          <!-- 汉堡菜单按钮，只在移动端显示 -->
          <el-icon class="toggle-drawer" v-if="isMobile" @click="drawerVisible = true">
            <Expand/>
          </el-icon>
          <div style="flex: 1"></div>
          <!-- 显示当前用户角色 -->
          <span style="margin-right: 15px;">您的身份: {{ userStore.userInfo.router }}</span>
          <span style="margin-right: 15px;">姓名: {{ userStore.userInfo.name }}</span>
          <el-button @click="handleLogout">退出登录</el-button>
        </el-header>

        <!-- 2.2 路由视图 -->
        <el-main>

          <router-view/>

        </el-main>
        <el-footer class="main-footer">
          <el-watermark content="wei-zuoHui-app-graduation-v1.0">
            <div style="flex: 1"></div>
            <el-text type="success" size="small">wei-zuoHui-app-graduation-v1.0 © 2023 2023-05-09</el-text>
          </el-watermark>
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import {ref, computed, onMounted, onUnmounted} from 'vue';
import {useRouter} from 'vue-router';
import {Expand, Watermelon} from '@element-plus/icons-vue';
import {menuConfig, type MenuItem} from '../config/menu'; // 导入菜单配置
import {useUserStore} from '../stores/userStore'; // 导入用户store

// --- 响应式逻辑 ---
const router = useRouter();
const userStore = useUserStore();

const breakpoint = 768;
const isMobile = ref(false);
const drawerVisible = ref(false);
const isCollapse = ref(false);

const updateIsMobile = () => {
  isMobile.value = window.innerWidth < breakpoint;
  if (!isMobile.value) {
    drawerVisible.value = false;
  }
};

onMounted(() => {
  updateIsMobile();
  window.addEventListener('resize', updateIsMobile);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateIsMobile);
});

// ========== 核心逻辑：计算允许显示的菜单 ==========
const allowedMenus = computed<MenuItem[]>(() => {
  const currentRole = userStore.userInfo.router;
  console.log('当前角色:', currentRole)
  // 如果用户未登录或角色不存在，返回空数组，不显示任何菜单
  if (!currentRole) {
    return [];
  }
  // 过滤出当前用户有权限查看的菜单项
  return menuConfig.filter(item => item.roles.includes(currentRole));
});

// ========== 退出登录逻辑 ==========
const handleLogout = () => {
  userStore.logout();
  // 退出后跳转到登录页
  router.push('/login');
};

</script>

<style scoped>
/* ... 样式部分保持不变 ... */
.app-container {
  height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.sidebar {
  background-color: #2c3e50;
  transition: width 0.3s;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 100%;
  border-right: none;
}

.sidebar-drawer .el-menu {
  border-right: none;
}

.main-content {
  background-color: #f4f6f9;
  padding: 0;
  overflow-y: auto;
}

.main-content .el-container {
  height: 100%;
}

.main-header {
  background-color: #fff;
  color: #2c3e50;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 20px;
}

.main-footer {
  background-color: #fff;
  color: #2c3e50;
  display: flex;
  align-items: center;
  border-top: 1px solid #e4e7ed;
  padding: 0 20px;
}

.toggle-drawer {
  font-size: 24px;
  cursor: pointer;
  margin-right: 15px;
  color: #2c3e50;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.main-content .el-main {
  padding: 20px;
}

.el-drawer {
  padding: 0;
}
</style>
